// import React from 'react'; // React 17+ 不需要显式导入
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import { ModalSheetDemo } from './pages/ModalSheetDemo';
import { SnapPointsDemo } from './pages/SnapPointsDemo';
import { default as ThemeDemo } from './pages/ThemeDemo';
import './App.css';

function App() {
  return (
    <Router>
      <div className='app'>
        <Routes>
          <Route path='/' element={<HomePage />} />
          <Route path='/modal-sheet-demo' element={<ModalSheetDemo />} />
          <Route path='/snap-points' element={<SnapPointsDemo />} />
          <Route path='/theme-demo' element={<ThemeDemo />} />
        </Routes>
      </div>
    </Router>
  );
}

function HomePage() {
  return (
    <div
      style={{
        padding: '40px',
        maxWidth: '800px',
        margin: '0 auto',
        fontFamily:
          '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
      }}
    >
      <h1 style={{ fontSize: '42px', fontWeight: '900', marginBottom: '20px' }}>
        Modal Sheet 组件演示
      </h1>
      <p style={{ fontSize: '20px', color: '#666', marginBottom: '40px' }}>
        选择一个演示页面来体验不同的功能
      </p>

      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
          gap: '20px',
        }}
      >
        <Link
          to='/modal-sheet-demo'
          style={{
            display: 'block',
            padding: '30px',
            background: '#f8f9fa',
            borderRadius: '12px',
            textDecoration: 'none',
            color: '#000',
            border: '1px solid #e9ecef',
            transition: 'all 0.2s',
          }}
          onMouseOver={e => {
            e.currentTarget.style.background = '#e9ecef';
            e.currentTarget.style.transform = 'translateY(-2px)';
          }}
          onMouseOut={e => {
            e.currentTarget.style.background = '#f8f9fa';
            e.currentTarget.style.transform = 'translateY(0)';
          }}
        >
          <h3 style={{ margin: '0 0 12px 0', fontSize: '20px' }}>
            📱 完整功能演示
          </h3>
          <p style={{ margin: '0', color: '#666', lineHeight: '1.5' }}>
            体验 Modal Sheet 的所有功能，包括不同尺寸、位置、动画效果等
          </p>
        </Link>

        <Link
          to='/snap-points'
          style={{
            display: 'block',
            padding: '30px',
            background: '#f8f9fa',
            borderRadius: '12px',
            textDecoration: 'none',
            color: '#000',
            border: '1px solid #e9ecef',
            transition: 'all 0.2s',
          }}
          onMouseOver={e => {
            e.currentTarget.style.background = '#e9ecef';
            e.currentTarget.style.transform = 'translateY(-2px)';
          }}
          onMouseOut={e => {
            e.currentTarget.style.background = '#f8f9fa';
            e.currentTarget.style.transform = 'translateY(0)';
          }}
        >
          <h3 style={{ margin: '0 0 12px 0', fontSize: '20px' }}>
            🎯 Snap Points 演示
          </h3>
          <p style={{ margin: '0', color: '#666', lineHeight: '1.5' }}>
            专门展示 Snap Points 吸附点功能，包括拖拽和按钮控制
          </p>
        </Link>

        <Link
          to='/theme-demo'
          style={{
            display: 'block',
            padding: '30px',
            background: '#f8f9fa',
            borderRadius: '12px',
            textDecoration: 'none',
            color: '#000',
            border: '1px solid #e9ecef',
            transition: 'all 0.2s',
          }}
          onMouseOver={e => {
            e.currentTarget.style.background = '#e9ecef';
            e.currentTarget.style.transform = 'translateY(-2px)';
          }}
          onMouseOut={e => {
            e.currentTarget.style.background = '#f8f9fa';
            e.currentTarget.style.transform = 'translateY(0)';
          }}
        >
          <h3 style={{ margin: '0 0 12px 0', fontSize: '20px' }}>
            🎨 主题系统演示
          </h3>
          <p style={{ margin: '0', color: '#666', lineHeight: '1.5' }}>
            体验深色模式、自定义主题和实时主题切换功能
          </p>
        </Link>
      </div>
    </div>
  );
}

export default App;
